
    @charset "utf-8"
	/*global*/
	body{width: 100%;height: 100%;font-family: 'Vaud Display', Helvetica, sans-serif;overflow: hidden;}
	.left{float: left;}
	.right{float: right;}
	.clear{clear: both}
	/*section*/
	#wrap{display: none;position: relative;top: 0;font:bold 20px Lato,"Microsoft YaHei",sans-serif;}
	#wrap>section{position: relative;overflow: hidden}
	/*nav*/
	#nav{width: 40px;height: 160px;position: fixed;top: 50%;margin-top: -100px;right: 10px;z-index: 99}
	#nav li{position: relative;width: 16px;height: 16px;margin: 10px;border-radius: 100%;background: transparent;border:2px solid #fff;cursor:pointer}
	#nav li:before{content: '';width: 150px;font-size:15px;font-weight:normal;text-align: right;color: white;position: absolute;top: -3px;right: 30px;}
	#nav li:nth-child(1):hover:before{content: 'Home';}
	#nav li:nth-child(2):hover:before{content: 'About me';}
	#nav li:nth-child(3):hover:before{content: 'Skill&demo';}
	#nav li:nth-child(4):hover:before{content: 'contact me';}
	#nav  .displayNow{background:#fff}
	/*p1*/
	#p1{background: #00a8e7}
	#p1 div:nth-child(1){width: 100%;height: 100%; background: url(../img/bg1.jpg) 50% 50% no-repeat ;background-size: cover;box-shadow: 0 0 5px 5px #888888; transition: all .2s ease}
	#p1 div:nth-child(2){display: none;width: 80%;margin:80px auto;position: absolute;top:0;bottom:0;left:0;right:0;height: 80%;border: 10px solid white;animation: move1 1s 0s linear both}
	#p1 div:nth-child(3){width:80%;color: #fff;font-size:50px;margin:80px auto;position: absolute;top:0;bottom:0;left:0;right:0;height: 80%;z-index:9;}
	#p1 div:nth-child(3) p{width: 90%;margin:30px auto;}
	#p1 div:nth-child(3) p:last-of-type{text-align: right;margin:0 auto;}
	#p1 img{display: block;position: absolute;margin-left:-50px ;bottom:60px;left:50%;z-index: 10;}
	.move2{animation: move2 .6s 1.2s linear both}
	.move3{animation: move3 1.5s  infinite linear both}
	.move4{position: absolute;top: 20px;left: 20px;width: 300px;height: 40px;animation: move4 3s infinite normal; transform-style: preserve-3d;transform: translateZ(-20px)}
	.move4 p{position: absolute;left:0;width: 280px;height: 20px;padding: 10px;background: #03734b;line-height: 20px;color: #fff;text-align:center;}
	.move4 p:first-of-type{top:0px;box-shadow: 0 0 3px #888888;transform: translateZ(20px);transition: all 3s;}
	.move4 p:last-of-type{top:0px;box-shadow: 0 0 3px #888888;transform: rotateX(-90deg) translateZ(20px);-transition: all 3s;}
	@keyframes move1{0%{opacity:0;border: 120px solid white;transform: scale(.6);}100%{opacity:1;border: 10px solid white;transform: scale(1);}}
	@keyframes move2{0%{opacity:0;}100%{opacity:1;}}
	@keyframes move3{0%{bottom: 60px;}70%{bottom: 5px;}100%{bottom: 60px;}}
	@keyframes move4{0%{transform: rotateX(0);}50%{transform:rotateX(95deg);}100%{transform:rotateX(0);}}
	
	/*p2*/
	#p2{background: linear-gradient(to bottom, #1e242a 30%, #293039 60%);}
	#p2>span{display: block;position: absolute;top:30px;left: 30px;color: #fff;font-size: 30px;text-shadow:1px 0 #1e242a,2px  0 #fff;}
	#p2 img:last-of-type{display: block;position: absolute;bottom:-300px;width: 100%;z-index: 10;transition:all 2s ease-out;  }
	#star{position: absolute;top: 100px;left: 0;width: 100%;height: 100%;z-index: 9;transition:all 2s ease-out; }
	#star .meteorite { width: 4px; height: 4px; border-radius: 50%;background: #FFF; transform-origin: 0% 0%;transform: rotate(-30deg) translateX(0);animation: star-ani 4s infinite linear both;}
	#star .meteorite:after {content: '';display: block;top: 0px;left: 4px;border: 0px solid #fff;border-width: 2px 90px 2px 90px;border-color: transparent transparent transparent rgba(255, 255, 255, .7);} 
	#star .meteorite:nth-child(1){position: relative;top: 100px;left: 1200px;animation: move5 4s 2s infinite linear both}
	#star .meteorite:nth-child(2){position: relative;top: 200px;left: 500px;animation: move5 4s 1s infinite linear both}
	#star .meteorite:nth-child(3){position: relative;top: 400px;left: 1800px;animation: move5 4s 0.5s infinite linear both}
	#star .meteorite:nth-child(4){position: relative;top: 450px;left: 1000px;animation: move5 4s 3s infinite linear both}
	@keyframes move5{0% { opacity: 0; transform:  rotate(-30deg) translateX(0); } 50% { opacity: 1; transform:  rotate(-30deg)  translateX(-500px);}100%{opacity: 0; transform:  rotate(-30deg) translateX(-1000px);}}
	#me0 {width: 150px;height: 150px;position: relative;margin:30px auto }
	#me0>div:nth-child(1){display: none;width:75px; height:150px; background-color:#fff; border-radius:75px  0 0 75px ; position:absolute; top: 0;left:0; transform-origin: 100% 50%;  transform:rotate(0);  z-index: 10; animation: move10 1s linear both;}
	#me0>div:nth-child(2){display: block; width:75px; height:150px; background-color:#1e242a; position:absolute; top:0px;left: 0px; z-index: 11;}
	#me0>div:nth-child(3){display: none;width:75px; height:150px; background-color:#fff;border-radius:0 75px 75px  0;position:absolute; top: 0px;left: 75px;transform:rotate(0); transform-origin: 0 50%;  animation: move10 1s  linear both;}
	#me0>div:nth-child(4){width: 130px;height: 130px;background: #1e242a;border-radius: 100%;position: absolute;top: 10px;left: 10px;z-index: 13;}
	#me0 #me1{display: none;width: 100%;height: 100%;background: url(../img/me.jpg) 50% 50% no-repeat;background-size: cover;border-radius: 100%;transform:perspective(7000px)  rotateX(90deg); transform-origin: 50% 50%;  animation: move11 2s  linear both;overflow: hidden;}
	#me0 #me1:before{content: '';width:90%;height: 70%;position: absolute;top:5px;left: 5px;border-radius: 100%;background: radial-gradient(rgba(255,255,255,.3),rgba(255,255,255,0));}
	#me2{width: 100%;position: relative;margin:10px auto }
	#me2 h2{display: none;font-size:50px;color:rgba(255,255,255,.9);text-align:center;letter-spacing: 4px;width: 100%;margin: 5px 0;letter-spacing: 8px;animation: move13 1s linear both}
	#me2 ul{width: 50%;position: relative;margin:25px auto;font-size: 20px;font-weight: normal;text-align:center;}
	#me2 ul li{display: none;margin:4px 0 ;position: relative;top:20px;}
	#me2 ul li:nth-child(1){animation: move12 1s linear both}
	#me2 ul li:nth-child(2){animation: move12 1s 0.5s linear both}
	#me2 ul li:nth-child(5){animation: move12 1s 1s linear both}
	#me2 ul li:nth-child(6){animation: move12 1s 1.5s linear both}
	#me2 ul li:nth-child(7){animation: move12 1s 2s linear both}
	#me2 ul li:nth-child(8){animation: move12 1s 2.5s linear both}
	@keyframes move10{0%{transform:rotate(0); }100%{transform:rotate(180deg);}}
	@keyframes move11{0%{transform: perspective(500px) rotateX(90deg); }40%{transform: perspective(500px) rotateX(-45deg); }60%{transform: perspective(500px) rotateX(25deg); }80%{transform: perspective(500px) rotateX(-10deg); }100%{transform: perspective(500px) rotateX(0deg); }}
	@keyframes move12{0%{color:rgba(255,255,255,0);top: 20px}100%{color:rgba(255,255,255,.5);top: 0px}}
	@keyframes move13{0%{color:rgba(255,255,255,0);top: 20px}100%{color:rgba(255,255,255,1);top: 0px}}
	.move6{animation: move6 2s infinite linear both;}
	.move7{animation: move10 4s infinite linear both;-webkit-animation: move10 4s  infinite linear both;}
	@keyframes move6{	0%{box-shadow: 0 0 0px #fff}50%{box-shadow: 0 0 10px 2px #fff}100%{box-shadow: 0 0 0px #fff}}   
	@keyframes move7{	0%{box-shadow: 0 0 0px #fff}50%{box-shadow: 0 0 4px 2px #fff}100%{box-shadow: 0 0 0px #fff}} 
	/*p3*/
	#p3{background: #22c3aa}
	#p3>span{display: block;position: absolute;top:30px;left: 30px;color: #eaeaea;font-size: 30px;}
	#p3>ul{width: 50%;margin: 7% auto;text-align: center;}
	#p3>ul li{margin: 10px 0;font-size: 25px}
	#p3>ul li:nth-child(2n+1){color: #008a75}
	#p3>ul li:nth-child(2n){color: #aee2d9;}
	#open{position: relative;width: 300px;height: 40px;margin: 30px auto;background: #fff;overflow: hidden;cursor: pointer;}
	#open div{position: absolute;width: 0;height: 0;border-radius:100%;border: 0 solid rgba(0,255,0,.5);top: 0;left: 150px;animation: move8 2s  infinite linear both; }
	#open span{display: block;width: 100%;height: 30px;margin: 8px 0 12px 0;line-height:100%;text-align: center;color: #008a75 }
	#close{display:none;position:absolute;width: 200px;height: 30px;bottom: 5%;right: 5%;background: transparent;overflow: hidden;cursor: pointer;z-index: 21}
	#close div{display: block;position: absolute;width: 0;height: 0;border-radius:100%;border: 100px solid rgba(0,255,0,0);top: -100px;left: 0px;animation: move9 2s  infinite linear both; }
	#close span{display: block;width: 100%;height: 30px;line-height:100%;text-align: center;color: #008a75 }
	#p3 iframe{position:absolute;top: 5%;left: 5%;width: 90%;height: 90%;box-shadow: 0 0  20px  #fff;z-index: 20;transform-origin: -10% 50%;transform: perspective(10000px) rotateY(-90deg);transition:all 2s ease }
	@keyframes move8{0%{border: 0 solid rgba(0,255,0,.5);top: 0;left: 150px}100%{border: 150px solid rgba(0,255,0,0);top: -150px;left: 0px}} 
	@keyframes move9{0%{border: 100px solid rgba(0,255,0,0);top: -100px;left: 0px}100%{border: 0 solid rgba(0,255,0,.5);top: 0;left: 100px}} 
	/*p4*/
	#p4{position: relative;background: #282828;padding: 10px}
	#p4 p{position: relative;margin:5px 0;font-size:20px;width: 100%;text-align: center;color:#22c3aa }
	#p4 p a{font-size:18px;color:#22c3aa}
	#p4 p a:hover{color:#008a75}
	#p4>div{position: relative;margin: 10px auto;width:80px;}
	#p4>div span{display:block;float: left;width: 40px;height: 40px;background-size: cover;cursor: pointer}
	#wechat{background: url(../img/contact0.png) 0 0 no-repeat;}
	#qq{background: url(../img/contact0.png) 0 -35px no-repeat;}
	#wechat:before{display: none;content: '';width: 120px;height: 120px;background: url(../img/wechat.png) 50% 50% no-repeat;border-radius: 10px;background-size:100%;position: absolute;top: -70px;left: -140px}
	#wechat:after{display: none;content: '';width: 0;height: 0;border:20px solid transparent;border-left-color:#9a2900;position: absolute;top: 0px;left: -20px}
	#qq:before{display: none;content: '';width: 120px;height: 120px;background: url(../img/QQ.png) 50% 50% no-repeat;border-radius: 10px;background-size:100%;position: absolute;top: -70px;right: -140px}
	#qq:after{display: none;content: '';width: 0;height: 0;border:20px solid transparent;border-right-color: #9a2900;position: absolute;top: 0px;right: -20px}
	#wechat:hover:before,#wechat:hover:after{display: block;}
	#qq:hover:before,#qq:hover:after{display: block;}
